<template>
<div class="banner">
  <a href="#" class="left"></a>
  <a href="#" class="right"></a>
  <ul id="slides">
    <li><a href="#"><img src="../../public/1/搭房子.jpg"  alt=""></a></li>
    <li><a href="#"><img src="../../public/1/火柴人.jpg" alt=""></a></li>
    <li><a href="#"><img src="../../public/1/猫鼠大战.jpg"  alt=""></a></li>
    <li><a href="#"><img src="../../public/1/鳄鱼洗澡.jpg" alt=""></a></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</template>

<script>
export default {
  name: "RotationChart"
}
let left=0;
let timer;
run();
  function run() {
    if(left<=-3200){
      left=0;
    }
    // console.log(document.querySelector('#slides'))
    // document.querySelector('#slides').style.marginleft= left+'px';
    left-=10;
    timer=setTimeout(run,10);
  }



</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.banner {
  width: 800px;
  height: 400px;
overflow: hidden;
}
#slides {
  width: 3200px;
  height: 400px;
}
#slides img{
  width: 800px;
  height: 400px;
}
#slides li{
  float:left;
}
</style>